<template>
<div style="font-size: 12px;">
	<div style="border: 1px solid #dfe6ec;">
		<div style="border-bottom: 1px solid #dfe6ec;margin: 10px;">
			<el-row :gutter="24" style="margin-bottom: 10px"> 
				<el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'SN：' + device.deviceBase.snNum}} </el-col> 
				<el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'设备类型：' + device.deviceBase.typeName}} </el-col> 
				<el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'品牌：' + device.deviceBase.brandName}} </el-col> 
				<el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'设备状态：' + device.deviceBase.state}} </el-col> 
			</el-row>
			<el-row :gutter="24" style="padding-bottom:5px"> 
				<el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'型号：' + device.deviceBase.modelName}} </el-col> 
				<el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'规格：' + device.deviceBase.specName}} </el-col> 
			</el-row>
		</div>
		<div style="border-bottom: 1px solid #dfe6ec;margin: 10px;">
			<el-row :gutter="24" style="margin-bottom: 10px"> 
				<el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'接口数量：' + device.deviceSwitch.interfaceNum}} </el-col> 
				<el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'40G口：' + device.deviceSwitch.g40Num}} </el-col> 
				<el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'光模块：' + device.deviceSwitch.moduleNum}} </el-col> 
			</el-row>
		</div>
		<div style="margin: 10px;">
			<el-row :gutter="24" style="margin-bottom: 10px"> 
				<el-col :xs="12" :sm="12" :md="12" :lg="12"> {{'设备用途：' + device.deviceSwitch.purpose}} </el-col> 
				<el-col :xs="12" :sm="12" :md="12" :lg="12"> {{'主机名称：' + device.deviceSwitch.hostName}} </el-col> 
			</el-row>
			<el-row :gutter="24" style="margin-bottom: 10px"> 
				<el-col :xs="6" :sm="6" :md="6" :lg="6"> {{'管理网地址：' + device.deviceSwitch.manageIp}} </el-col> 
			</el-row>		
		</div>
	</div>
	<div style="margin: 5px;">
		<el-row :gutter="24" style="margin: 0px"> 
			<el-col :xs="6" :sm="6" :md="6" :lg="6"> 接口使用情况 ：</el-col>
			<el-col :xs="18" :sm="18" :md="18" :lg="18">
				<el-row :gutter="18" style="margin: 0px"> 
					<el-col :xs="1" :sm="1" :md="1" :lg="1"> 
						<div class="cell_box1 cell_box-up1">
						</div>
					</el-col>
					<el-col :xs="4" :sm="4" :md="4" :lg="4">
						UP：15
					</el-col>
					<el-col :xs="1" :sm="1" :md="1" :lg="1"> 
						<div class="cell_box1 cell_box-down1">
						</div>
					</el-col>
					<el-col :xs="4" :sm="4" :md="4" :lg="4">
						DOWN：15
					</el-col>
					<el-col :xs="1" :sm="1" :md="1" :lg="1"> 
						<div class="cell_box1 cell_box-unplugin1">
						</div>
					</el-col>
					<el-col :xs="8" :sm="8" :md="8" :lg="8">
						UNPLUGIN：15
					</el-col>										
				</el-row>
			</el-col> 
		</el-row>	
	</div>
	<div style="border: 1px solid #dfe6ec;">
		<div style="margin: 10px;">
			<port-state :portsData="device.deviceSwitchSub" @sendMsg="sendMsg" :cellRows="2"></port-state >
		</div>		
	</div>
	<div style="border: 1px solid #dfe6ec;font-size: 16px;">
		<div style="margin: 10px;">
			<el-row :gutter="24" style="margin: 0px"> 
				<el-col :xs="4" :sm="4" :md="4" :lg="4"> 接口用途 ：</el-col>
				<el-col :xs="14" :sm="14" :md="14" :lg="14">
					<div>
						<span v-if="!updateFlag"> {{!currentInterface || currentInterface.purpose === '' ?'无' : currentInterface.purpose}}</span>
						<el-input v-else v-model="currentInterface.purpose" style="height:16px"></el-input>
					</div>
				</el-col>
				<el-col :xs="6" :sm="6" :md="6" :lg="6">
					<el-button v-if="!updateFlag" @click.native.prevent="update()" size="" style="padding: 5px 7px"
						:disabled="!currentInterface || currentInterface.state ==='3'?true:false">
       					修改
        			</el-button>
        			<el-row :gutter="24" style="margin: 0px"  v-else> 
        				<el-col :xs="12" :sm="12" :md="12" :lg="12">
        					<el-button @click.native.prevent="updateSubmit()" size="" style="padding: 5px 7px">
	       					确定
	        				</el-button>
        				</el-col>
        				<el-col :xs="12" :sm="12" :md="12" :lg="12">
        					<el-button @click.native.prevent="updateFlag = false;" size="" style="padding: 5px 7px">
	       					取消
	        				</el-button>
        				</el-col>        				
        			</el-row>
				</el-col>
			</el-row>
		</div>		
	</div>		
</div>
</template>
<style>
.cell_box1 {
    cursor: pointer;
    display: block;
    width: 1.5em;
    height: 1.5em;
    font-size: .6em;
    text-align: center;
    line-height: 1em;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}
.cell_box-up1 {
    background-color: #66CC00;
}

.cell_box-down1 {
    background-color: #FA6634;
}

.cell_box-unplugin1 {
    background-color: #999999;
}
</style>
<script>
import PortState from '@/components/Port-state';
export default {
	name : 'drop-bitmap-switch',
	components : {
		PortState
	},
	props : {
		device : {
			type : Object,
			default : {}
		},
	},
	mounted : function() {},
	watch : {

	},
	data () {
		return {
			currentInterface : null,
			updateFlag : false,
		}
	},
	methods : {
		sendMsg : function(val) {
			this.updateFlag = false;
			this.currentInterface = val;
		},
		update : function() {
			this.updateFlag = true;
		},
		showWarning : function(msg, title) {
			this.$alert(msg, title, {
				showConfirmButton : false,
				showCancelButton : true,
				cancelButtonText : '关闭',
				type : 'warning'
			});
		},
		showSuccess : function(msg, title) {
			this.$alert(msg, title, {
				showConfirmButton : true,
				showCancelButton : false,
				confirmButtonText : '确定',
				type : 'success',
				callback : action => {
					this.show = false;
				}
			});
		},
		updateSubmit : function() {
			let _url = '';
			_url += '/resman/device/switch/Purpose';
			this.$http.put(_url, this.currentInterface)
				.then((response) => {
					if (response.code === 0) {
						this.showSuccess('操作已成功', '');
						this.updateFlag = false;
					} else {
						this.showWarning(response.msg, '创建失败');
					}
				}).catch((response) => {
				console.log(response)
			})
		}
	}
}
</script>